<template>
  <div>
    <div style="width: 500px;margin: 0 auto">
        <el-input
          v-model="search"
          placeholder="输入用户名搜索"/>
    </div>
    <el-table border :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
      <el-table-column prop="SerialNumber" label="交易流水号" width="200" align="center">
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="100" align="center">
      </el-table-column>
      <el-table-column prop="money" label="交易金额" width="100" align="center">
      </el-table-column>
      <el-table-column prop="source" label="来源" width="250" align="center">
      </el-table-column>
      <el-table-column prop="mode" label="支付方式" width="100" align="center">
      </el-table-column>
      <el-table-column prop="state" label="交易状态" width="200" align="center">
      </el-table-column>
      <el-table-column prop="time" label="交易时间" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'tranRecord',
  data () {
    return {
      tableData: [
        {
          SerialNumber: '202112021330',
          name: '李四1',
          money: '100',
          source: '问诊',
          mode: '微信',
          state: '成功',
          time: '2021.12.02'
        },
        {
          SerialNumber: '202112021330',
          name: '李四2',
          money: '100',
          source: '问诊',
          mode: '微信',
          state: '成功',
          time: '2021.12.02'
        },
        {
          SerialNumber: '202112021330',
          name: '李四3',
          money: '100',
          source: '问诊',
          mode: '微信',
          state: '成功',
          time: '2021.12.02'
        },
        {
          SerialNumber: '202112021330',
          name: '李四4',
          money: '100',
          source: '问诊',
          mode: '微信',
          state: '成功',
          time: '2021.12.02'
        },
        {
          SerialNumber: '202112021330',
          name: '李四5',
          money: '100',
          source: '问诊',
          mode: '微信',
          state: '成功',
          time: '2021.12.02'
        }
      ],
      search: ''
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>
